<template>
  <div id="views" />
</template>

<script>

export default {
  name: 'Views',
  props: {
    dataList: {
      type: Array,
      default: () => { return [] }
    }
  },
  mounted() {
    this.drawChart()
  },
  methods: {
    drawChart() {
      const data = [
        ['2022-04-04', 100],
        ['2022-04-05', 200],
        ['2022-04-06', 300],
        ['2022-04-08', 100],
        ['2022-04-09', 500],
        ['2022-04-10', 700],
        ['2022-04-11', 400],
        ['2022-04-12', 300],
        ['2022-04-13', 400],
        ['2022-04-14', 300],
        ['2022-04-15', 500],
        ['2022-04-16', 700]
      ]
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      const myChart = this.$echarts.init(document.getElementById('views'))
      // 指定图表的配置项和数据
      const option = {
        title: {
          text: '历史浏览量',
          left: '1%'
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '5%',
          right: '15%',
          bottom: '10%'
        },
        xAxis: {
          data: data.map(function(item) {
            return item[0]
          })
        },
        yAxis: {},
        toolbox: {
          right: 2,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        dataZoom: [
          {
            startValue: '2014-06-01'
          },
          {
            type: 'inside'
          }
        ],
        visualMap: {
          top: 50,
          right: 10,
          pieces: [
            {
              gt: 0,
              lte: 50,
              color: '#93CE07'
            },
            {
              gt: 50,
              lte: 100,
              color: '#FBDB0F'
            },
            {
              gt: 100,
              lte: 150,
              color: '#FC7D02'
            },
            {
              gt: 150,
              lte: 200,
              color: '#FD0100'
            },
            {
              gt: 200,
              lte: 300,
              color: '#AA069F'
            },
            {
              gt: 300,
              color: '#AC3B2A'
            }
          ],
          outOfRange: {
            color: '#999'
          }
        },
        series: {
          name: '浏览量',
          type: 'line',
          data: data.map(function(item) {
            return item[1]
          })
        }
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
